From 0e6a2bdc6c45cf96fabb27aa3b1b41861c808636 Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Tue, 6 Feb 2024 10:19:57 -0500
Subject: Limit file upload size on the client (#84)

---
 .../[groupId]/expenses/create-from-receipt-button.tsx     | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

(limited to 'src/app/groups/[groupId]/expenses')

diff --git a/src/app/groups/[groupId]/expenses/create-from-receipt-button.tsx b/src/app/groups/[groupId]/expenses/create-from-receipt-button.tsx
index c157cc9..dab04a1 100644
--- a/src/app/groups/[groupId]/expenses/create-from-receipt-button.tsx
+++ b/src/app/groups/[groupId]/expenses/create-from-receipt-button.tsx
@@ -26,7 +26,7 @@ import {
 import { ToastAction } from '@/components/ui/toast'
 import { useToast } from '@/components/ui/use-toast'
 import { useMediaQuery } from '@/lib/hooks'
-import { formatCurrency, formatExpenseDate } from '@/lib/utils'
+import { formatCurrency, formatExpenseDate, formatFileSize } from '@/lib/utils'
 import { Category } from '@prisma/client'
 import { ChevronRight, FileQuestion, Loader2, Receipt } from 'lucide-react'
 import { getImageData, usePresignedUpload } from 'next-s3-upload'
@@ -40,6 +40,8 @@ type Props = {
   categories: Category[]
 }
 
+const MAX_FILE_SIZE = 5 * 1024 ** 2
+
 export function CreateFromReceiptButton({
   groupId,
   groupCurrency,
@@ -56,6 +58,17 @@ export function CreateFromReceiptButton({
   const isDesktop = useMediaQuery('(min-width: 640px)')
 
   const handleFileChange = async (file: File) => {
+    if (file.size > MAX_FILE_SIZE) {
+      toast({
+        title: 'The file is too big',
+        description: `The maximum file size you can upload is ${formatFileSize(
+          MAX_FILE_SIZE,
+        )}. Yours is ${formatFileSize(file.size)}.`,
+        variant: 'destructive',
+      })
+      return
+    }
+
     const upload = async () => {
       try {
         setPending(true)
-- 
cgit v1.3